<template>
    <div class="panel" style="min-height:562px;">
        <el-tabs v-model="activeName">
            <el-tab-pane label="开通会员" name="dashboard">
                <div class="padding_16">
                    <p v-if="tableData.expire_time" style="padding-top: 20px;">会员到期：<span style="color: red;">{{tableData.expire_time}}</span></p>
                    <p v-if="tableData.expire_time" style="padding-top: 20px;">置顶次数：<span style="color: red;">{{tableData.roof_num}}</span></p>
                    <el-table :data="tableData.member" stripe border style="width: 100%;margin-top: 20px;">
                        <el-table-column prop="ms_name" label="会员类型" width="180"></el-table-column>
                        <el-table-column prop="ms_price" label="金额" width="180">
                        </el-table-column>
                        <el-table-column prop="ms_content" label="权限"></el-table-column>
                        <el-table-column prop="ms_roof" label="置顶次数"></el-table-column>
                        <el-table-column prop="ms_integral" label="奖励积分"></el-table-column>
                        <el-table-column label="操作" width="110" align="center">
                            <template slot-scope="scope">
                                <el-button size="mini" type="primary" @click="handleOpen(scope.$index, scope.row, tableData.user_type)">{{tableData.user_type == 1 ? '开通会员':'续费会员'}}</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-tab-pane>
            <el-tab-pane label="会员记录" name="record">
                <div class="notice-item-list padding_16" v-show="!listIsZero">
                    <ul class="notice-list">
                        <li v-for="(item,index) in listData.data" :key="index" style="line-height: 24px;">
                            <el-row>
                                <el-col :span="12">
                                    <p class="notice-data">会员类型：{{item.ms_name}}</p>
                                    <p class="notice-data task-date" style="font-size: 12px;">订单号：{{item.o_order_num}}</p>
                                </el-col>
                                <el-col :span="12">
                                    <p class="notice-date text-right" :style="(item.o_payment_status == 1) ? 'color: #20a0ff;' : (item.o_payment_status == 2) ? 'color: rgb(7, 193, 96);': 'color: #f2826a;'">{{(item.o_payment_status == 1) ? '审核中' : (item.o_payment_status == 2) ? '审核成功': '审核失败'}}</p>
                                    <p class="notice-date text-right task-date">
                                        <span style="color: red;">{{(item.o_type == 1)?'微信':'支付宝'}}</span>
                                        <span style="display: inline-block;padding-left: 7px;font-size: 12px;">
                                            {{(item.o_payment_status == 1) ? '下单时间：' : (item.o_payment_status == 2) ? '审核时间：': '审核时间：'}}
                                            {{(item.o_payment_status == 1) ? item.o_place_order : (item.o_payment_status == 2) ? item.o_payment_time: item.o_payment_time}}
                                        </span>
                                    </p>
                                </el-col>
                            </el-row>
                        </li>
                    </ul>
                    <!-- 分页 -->
                    <div class="pagination text-right">
                        <el-pagination layout="prev, pager, next" :total="listData.total" @current-change="listPage"></el-pagination>
                    </div>
                
                </div>
                <!-- 暂无数据 -->
                <div class="mt-large text-center" v-show="listIsZero" style="margin-top: 90px;">
                    <img src="../../assets/images/empty.jpg" height="200" alt="">
                    <p class="tip-small">暂无数据</p>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>

    import '../../assets/css/workbench.css'
    import '../../assets/css/projects.css'
    export default {
        data(){
            return{
                activeName: 'dashboard',
                tableData: {},
                page: 1,
                listData: {},
                listIsZero: false,
            }
        },
        methods: {
            //开通会员
            handleOpen(ind,row,type){
                
                this.$router.push({path: '/recharge',query: {'msid': row.ms_id,'price': row.ms_price,'name': row.ms_name,'type': type}});
            },
            init(){
                var _this = this;
                //
                if(_this.$route.query.type){
                    _this.activeName = 'record';
                }
                //会员配置
                this.$httpGet('/api/index/System/memberlist',{
                    'u_id': window.localStorage.uid
                }).then(response => {
                    
                    if(response.code == 200){
                        
                        _this.tableData = response.msg;

                    }else{
                        this.$message({
                            message: response.msg,
                            type: 'warning'
                        });
                    }

                })

            },
            list(){
                var _this = this;
                //会员记录
                this.$httpGet('/api/index/System/openmemberlist',{
                    'u_id': window.localStorage.uid,
                    'page': this.page,
                }).then(response => {
                    
                    if(response.code == 200){
                        
                        _this.listData = response.msg;

                    }else if(response.code == 300){

                        _this.listData = [];
                        
                    }else{
                        this.$message({
                            message: response.msg,
                            type: 'warning'
                        });
                    }

                })
            },
            //切换页码
            listPage(page){
                this.page = page;
                this.list();
            },
        },
        mounted(){
            this.init();
            this.list();
        },
    }
</script>

<style scoped>
    .notice-list li{
        line-height: 36px;
        border-bottom: 1px dashed #efefef;
    }
    .notice-link{
        color: #2093ff;
    }
</style>